<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">甲醇船舶基本信息</div>
      <div class="loadAndSearch">
        <div class="loadExcel">
          <div class="button" type="success" @click="uploadFile1()">导入</div>
          <div class="button" type="success" @click="getExcelFile1()">导出</div>
          <div class="button" type="success" @click="addOne()">新增</div>
          <div class="multiButton" type="success" @click="deleteMulti()">
            删除
          </div>
        </div>
        <div class="iconInfoMation">
          <div class="iconInfoContain">
            <el-icon size="20" color="#27B250"><CircleCheckFilled /></el-icon>
            <div>:完成</div>
          </div>
          <div class="iconInfoContain">
            <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
            <div>:未完成</div>
          </div>
          <div class="iconInfoContain">
            <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
            <div>:不匹配</div>
          </div>
          <div class="iconInfoContain">
            <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
            <div>:待审核</div>
          </div>
          <div class="iconInfoContain">
            <el-icon color="#2E54A1" size="20"><QuestionFilled /></el-icon>
            <div>:未开始</div>
          </div>
        </div>
        <div class="search">
          <input type="text" placeholder="请输入船型" v-model="serchNum" />
          <div class="searchButton" @click="getRenderList()">搜索</div>
        </div>
      </div>
      <div class="table" :style="{ width: tableWidth }">
        <el-table
          empty-text="暂无数据"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
          }"
          :data="tableData"
          border
          stripe
          style="width: 100%; height: auto"
          :row-style="{ height: 30 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
          max-height="65vh"
          @selection-change="selecttableFunction"
          @row-dblclick="handleRowDblclick"
        >
          <el-table-column type="selection" width="35" align="center" />
          <el-table-column
            type="index"
            :index="indexNumber"
            align="center"
            label="序号"
            min-width="55"
          >
          </el-table-column>
          <!-- "船公司" -->
          <el-table-column
            prop="shipCompany"
            label="船东"
            align="center"
            min-width="90"
          />
          <!-- 运营公司 -->

          <el-table-column
            prop="shipType"
            label="船舶类型"
            min-width="90"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="shipTypeNum"
            label="船型"
            align="center"
            min-width="120"
            ><template #default="scope">
              <div
                class="bigLight"
                @mouseover="handleMouseOver"
                @mouseleave="handleMouseLeave"
              >
                {{ scope.row.shipTypeNum }}
                <div
                  class="bigLightSon"
                  :data-text="scope.row"
                  @click="showPromise(scope.row.id)"
                >
                  复制
                </div>
              </div>
            </template></el-table-column
          >
          <el-table-column
            prop="shareShipType"
            label="共享船型"
            align="center"
            min-width="120"
          >
            <template #default="scope">
              <div v-html="getShipTypeList(scope.row.shareShipType)"></div>
            </template>
          </el-table-column>

          <el-table-column
            label="船舶名"
            min-width="60"
            prop="shipName"
            align="center"
          />

          <el-table-column label="兼容性匹配" align="center" min-width="160">
            <el-table-column
              prop="zhiYuanCompatibilityCompatible"
              label="海港致远"
              align="center"
              min-width="85"
            >
              <template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-if="row.zhiYuanCompatibilityCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanCompatibilityCompatible == '未完成'"
                >
                  <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanCompatibilityCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanCompatibilityCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanCompatibilityCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else
                ></div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="系泊分析" align="center" min-width="100">
            <el-table-column
              prop="zhiYuanMoorCompatible"
              label="海港致远"
              align="center"
              min-width="85"
            >
              <template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-if="row.zhiYuanMoorCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanMoorCompatible == '未完成'"
                >
                  <el-icon color="red" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanMoorCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanMoorCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanMoorCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else
                ></div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="气体逸散风险研究"
            align="center"
            min-width="100"
          >
            <el-table-column
              prop="zhiYuanRiskCompatible"
              label="海港致远"
              align="center"
              min-width="85"
              ><template #default="{ row }">
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-if="row.zhiYuanRiskCompatible == '完成'"
                >
                  <el-icon size="20" color="#27B250"
                    ><CircleCheckFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanRiskCompatible == '未完成'"
                >
                  <el-icon color="#A6A6A6" size="20"><RemoveFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanRiskCompatible == '不匹配'"
                >
                  <el-icon color="red" size="20"><CircleCloseFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanRiskCompatible == '待审核'"
                >
                  <el-icon color="#FFF200" size="20"><InfoFilled /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else-if="row.zhiYuanRiskCompatible == '未开始'"
                >
                  <el-icon color="#2E54A1" size="20"
                    ><QuestionFilled
                  /></el-icon>
                </div>
                <div
                  class="iconInnerH"
                  @click="clickWhich(1, row.id)"
                  v-else
                ></div> </template
            ></el-table-column>
          </el-table-column>
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>
      <div class="foot">
        <div class="currentPage">当前第{{ page }}/{{ totalPages }}页</div>
        <div
          class="lastPage"
          :style="{ background: color }"
          @click="clickLastPage()"
        >
          上一页
        </div>
        <div
          class="nextPage"
          :style="{ backgroundColor: color1 }"
          @click="clickNextPage()"
        >
          下一页
        </div>
        <div class="currentNumber">共{{ totalNumber }}条</div>
        <div>跳转至:</div>
        <input
          type="text"
          class="skipPage"
          style="width: 50px !important"
          v-model="shipPageNumer"
        />
        <div class="sureSkip" @dbClick="skipPage">确定</div>
      </div>
    </div>
    <div class="dialog" ref="dialog" :style="{ display: show }">
      <div class="loadHomeWorkIneer">
        <div class="changeTop">
          <div
            class="delete"
            @click="deleteOne(id)"
            v-show="addOrEdit == '编辑'"
          >
            删除
          </div>
          <div class="sure" @click="sureAdd()">确认</div>
          <div class="cancel" @click="close()">取消</div>
        </div>

        <div class="manyInput">
          <div class="dialogText">1.船舶基本信息</div>
          <div class="iuptInnerContain">
            <div class="inputInner">
              <div class="name">船型编号:</div>
              <input type="text" placeholder="船型编号" v-model="shipTypeNum" />
            </div>

            <div class="inputInner">
              <div class="name">船舶类型:</div>
              <input type="text" placeholder="船舶类型" v-model="shipType" />
            </div>
            <div class="inputInner">
              <div class="name">共享船型:</div>
              <!-- <el-input
                v-model="zhiYuanYellowRestrictedArea"
                style="
                  width: 210px;
                  height: 200px;
                  padding: 0;
                  margin-left: 5px;
                "
                type="textarea"
                placeholder="请输入"
              /> -->
              <el-select
                style="width: 210px; margin-left: 5px"
                v-model="shareShipType"
                :no-data-text="'无数据'"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in shipTypeList"
                  :label="item || ''"
                  :value="item || ''"
                ></el-option>
              </el-select>
            </div>
            <div class="inputInner">
              <div class="name">船公司:</div>
              <input
                type="text"
                name=""
                placeholder="船公司"
                v-model="shipCompany"
              />
            </div>
            <div class="inputInner">
              <div class="name">船舶名:</div>
              <input
                type="text"
                name=""
                placeholder="船舶名"
                v-model="shipName"
              />
            </div>
            <!-- <div class="inputInner">
              <div class="name">运营公司:</div>
              <input
                type="text"
                name=""
                placeholder="运营公司"
                v-model="operatingCompany"
              />
            </div> -->
            <!-- <div class="inputInner">
              <div class="name">该船型累计完成加注量:</div>
              <input
                type="text"
                name=""
                placeholder="该船型累计完成加注量"
                v-model="fillCountNum"
              />
            </div> -->
            <!-- <div class="inputInner">
              <div class="name">船舶数量:</div>
              <input
                type="number"
                name=""
                placeholder="船舶数量"
                v-model="shipNum"
              />
            </div> -->

            <div class="inputInner">
              <div class="name">船长:</div>
              <input
                type="number"
                name=""
                placeholder="船长"
                v-model="shipLength"
              />
            </div>
            <div class="inputInner">
              <div class="name">船宽:</div>
              <input
                type="number"
                name=""
                placeholder="船宽"
                v-model="shipWidth"
              />
            </div>
            <div class="inputInner">
              <div class="name">型深:</div>
              <input
                type="number"
                name=""
                placeholder="型深"
                v-model="depthMoulded"
              />
            </div>
            <div class="inputInner">
              <div class="name">夏季最大吃水:</div>
              <input
                type="number"
                name=""
                placeholder="夏季最大吃水"
                v-model="summerMaximumDraft"
              />
            </div>
            <div class="inputInner">
              <div class="name">气相管中心至船底高度:</div>
              <input
                type="number"
                name=""
                placeholder="气相管中心至船底高度"
                v-model="shipBottomHeight"
              />
            </div>
            <div class="inputInner">
              <div class="name">液货舱型:</div>
              <input
                type="text"
                name=""
                placeholder="液货舱型"
                v-model="cargoTankType"
              />
            </div>
            <div class="inputInner">
              <div class="name">液货舱舱容:</div>
              <input
                type="number"
                name=""
                placeholder="液货舱舱容"
                v-model="cargoTankCapacity"
              />
            </div>
            <div class="inputInner">
              <div class="name">最大加注速率:</div>
              <input
                type="number"
                name=""
                placeholder="最大加注速率"
                v-model="maxFillingRate"
              />
            </div>

            <!-- <div class="inputInner">
              <div class="name">加注站位置:</div>
              <input
                type="text"
                name=""
                placeholder="加注站位置"
                v-model="fillingStation"
              />
            </div> -->
            <!-- <div class="inputInner">
              <div class="name">SSL连接形式:</div>
              <input
                type="text"
                name=""
                placeholder="SSL连接形式"
                v-model="ssl_connection_form"
              />
            </div> -->

            <div class="inputInner">
              <div class="name">软管连接形式:</div>
              <input
                type="text"
                name=""
                placeholder="软管连接形式"
                v-model="shose_connection_form"
              />
            </div>

            <div class="inputInner">
              <div class="name">加注站布置:</div>
              <input
                type="text"
                name=""
                placeholder="加注站布置"
                v-model="fillingStation"
              />
            </div>
            <!-- <div class="inputInner">
              <div class="name">液相管尺寸:</div>
              <input
                type="number"
                name=""
                placeholder="液相管尺寸"
                v-model="liquidPhaseTubeSize"
              />
            </div> -->
            <!-- <div class="inputInner">
              <div class="name">气象管尺寸:</div>
              <input
                type="number"
                name=""
                placeholder="气象管尺寸"
                v-model="meteorologicalTubeSize"
              />
            </div> -->
            <div class="inputInner">
              <div class="name">氮气软管接头类型:</div>
              <input
                type="text"
                name=""
                placeholder="氮气管接头类型"
                v-model="nitrogenPipeType"
              />
            </div>
          </div>

          <div class="dialogText">2.船舶清单</div>
          <el-table
            empty-text="暂无数据"
            border
            :row-style="{ height: 30 + 'px' }"
            :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
          }"
            :cell-style="{ padding: 0 + 'px' }"
            style="width: 90%; height: auto; margin: auto; margin-top: 20px"
            max-height="190px"
            :data="filledShipList"
          >
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="100"
            >
            </el-table-column>
            <el-table-column align="center" prop="chineseName" label="中文船名">
              <template #default="scope">
                <div class="scopeInnerBox">
                  <input type="text" v-model="scope.row.chineseName" />
                </div> </template
            ></el-table-column>
            <el-table-column align="center" prop="englishName" label="英文船名"
              ><template #default="scope">
                <div class="scopeInnerBox">
                  <input type="text" v-model="scope.row.englishName" />
                </div> </template
            ></el-table-column>
            <el-table-column align="center" prop="imo" label="IMO">
              <template #default="scope">
                <div class="scopeInnerBox">
                  <input type="text" v-model="scope.row.imo" />
                </div> </template
            ></el-table-column>

            <el-table-column align="center" label="操作" width="100">
              <template #default="scope">
                <div
                  class="deleteOneObj"
                  style="
                    margin: auto;
                    width: 20px;
                    height: 20px;
                    font-size: 14px;
                    background: #f646ff;
                    border-radius: 50%;
                    color: white;
                    line-height: 19px;
                  "
                  @click="deleteOneObj(scope.row.id, 1)"
                >
                  —
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="addOneObj" @click="addOneObject(1)">+</div>

          <div class="dialogText" style="margin-top: 10px">3.兼容性研究</div>
          <div class="iuptInnerContain" v-show="isActive">
            <div class="inputInner">
              <div class="name" style="width: 125px">完成情况:</div>
              <el-select
                style="width: 240px; margin-left: 5px"
                v-model="zhiYuanCompatibilityCompatible"
                :no-data-text="'无数据'"
                placeholder="请选择"
              >
                <el-option label="完成" value="完成"></el-option>
                <el-option label="未完成" value="未完成"></el-option>
                <el-option label="不匹配" value="不匹配"></el-option>
                <el-option label="待审核" value="待审核"></el-option>
                <el-option label="未开始" value="未开始"></el-option>
              </el-select>
            </div>
            <div class="jianrongList" style="margin-top: 20px">
              <div class="line1"></div>
              <div class="line2">海港致远</div>
              <div class="line3">
                <input type="text" v-model="shipTypeNum" />
              </div>
            </div>
            <div class="jianrongList">
              <div class="line1">光电缆品牌型号</div>
              <div class="line2">
                <input type="text" v-model="zhiYuanFilledShipModels[0]" />
              </div>
              <div class="line3">
                <input type="text" v-model="zhiYuanFilledShipModels[1]" />
              </div>
            </div>
            <div class="jianrongList">
              <div class="line1">加注站布置</div>
              <div class="line2">
                <input type="text" v-model="zhiYuanFillStationPosition[0]" />
              </div>
              <div class="line3">
                <input type="text" v-model="zhiYuanFillStationPosition[1]" />
              </div>
            </div>
            <div class="jianrongList">
              <div class="line1">氮气管匹配</div>
              <div class="line2">
                <input type="text" v-model="zhiYuanNitrogenTubeMatching[0]" />
              </div>
              <div class="line3">
                <input type="text" v-model="zhiYuanNitrogenTubeMatching[1]" />
              </div>
            </div>
            <div class="jianrongList">
              <div class="line1">加注位置</div>
              <div class="line2">
                <input type="text" v-model="zhiYuanFillPosition[0]" />
              </div>
              <div class="line3">
                <input type="text" v-model="zhiYuanFillPosition[1]" />
              </div>
            </div>
            <div class="jianrongList" style="border-bottom: 1px solid #ebeef5">
              <div class="line1">碰垫布置</div>
              <div class="line2">
                <input type="text" v-model="zhiYuanFenderPosition[0]" />
              </div>
              <div class="line3">
                <input type="text" v-model="zhiYuanFenderPosition[1]" />
              </div>
            </div>
          </div>

          <!-- 这里是系泊研究 -->
          <div class="dialogText" style="margin-top: 10px">4.系泊研究</div>

          <div class="centerInput1">
            <div class="centerNamePut">
              <div class="centerInputContain">
                <div class="inputInner">
                  <div class="name">完成情况:</div>

                  <el-select
                    style="width: 240px; margin-left: 5px"
                    v-model="zhiYuanMoorCompatible"
                    :no-data-text="'无数据'"
                    placeholder="请选择"
                  >
                    <el-option label="完成" value="完成"></el-option>
                    <el-option label="未完成" value="未完成"></el-option>
                    <el-option label="不匹配" value="不匹配"></el-option>
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="未开始" value="未开始"></el-option>
                  </el-select>
                </div>

                <div class="inputInner">
                  <div class="name">研究方:</div>
                  <input
                    type="text"
                    placeholder="研究方"
                    v-model="zhiYuanResearchTeam"
                  />
                </div>

                <div class="inputInner">
                  <div class="name">完成时间:</div>
                  <el-config-provider :locale="locale">
                    <el-date-picker
                      v-model="zhiYuanCompletionTime"
                      style="width: 240px; margin-left: 5px"
                      type="date"
                      placeholder="完成时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </el-config-provider>
                  <!-- <input
                    type="text"
                    placeholder="完成时间"
                    v-model="zhiYuanCompletionTime"
                  /> -->
                </div>

                <div class="inputInner">
                  <div class="name">STS报告编号:</div>
                  <input
                    type="text"
                    placeholder="STS报告编号"
                    v-model="zhiYuanReportNumber"
                  />
                </div>
                <div
                  class="inputInner"
                  style="justify-content: center; margin-left: 30px"
                >
                  <div class="name1" @click="clickUpLoad(0)">上传系泊图</div>
                  <div class="name1" @click="clickUpLoad(4)">上传STS报告</div>
                  <div
                    class="name1"
                    @click="
                      seePic(
                        this.$base +
                          '/download/shipType/' +
                          this.zhiYuanReportImg[0],
                        this.zhiYuanReportImg[0]
                      )
                    "
                  >
                    查看STS报告
                  </div>
                </div>
              </div>
              <div class="centerPicContain" style="height: 400px">
                <div style="width: 100%; height: 100%; margin-top: 10px">
                  <img
                    class="img1"
                    :src="src1"
                    alt=""
                    width="100%"
                    height="100%"
                    @click="seePic(src1, src1)"
                  />
                </div>
              </div>
              <div class="dialogText1" style="margin-top: 15px">
                系泊方向及带缆要求
              </div>
              <div class="centerPicContain">
                <div class="aliLIne">
                  <div class="tableLeft1">
                    <div class="left1Child1">靠泊方向</div>
                    <div class="left1Child2">加注船左靠大船</div>
                    <div class="left1Child3">加注船右靠大船</div>
                  </div>
                  <div class="tableLeft2">
                    <div class="left1Child1">船首系缆</div>
                    <div class="left1Child2">
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.C2" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.C3" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.C4" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.C5" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.C6" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.C7" />
                        </div>
                      </div>
                    </div>
                    <div class="left1Child3"></div>
                  </div>
                  <div class="tableLeft2">
                    <div class="left1Child1">船尾系缆</div>
                    <div class="left1Child2">
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.E2" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.E3" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.E4" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Head Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.E5" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Breast Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.E6" />
                        </div>
                      </div>
                      <div class="splice">
                        <div class="spliceLeft">Spring Line</div>
                        <div class="spliceRigth">
                          <input type="text" v-model="zhiYuanExcelJson.E7" />
                        </div>
                      </div>
                    </div>
                    <div class="left1Child3"></div>
                  </div>
                  <div class="tableLeft4">
                    <div class="left1Child1">系泊报告</div>
                    <div class="left1Child2">
                      <input type="text" v-model="zhiYuanExcelJson.F2" />
                    </div>
                    <div class="left1Child2">
                      <input type="text" v-model="zhiYuanExcelJson.F5" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 这里是同步作业风险 -->
          <div class="dialogText" style="margin-top: 10px">5.逸散分析研究</div>
          <div
            class="centerInput1"
            style="padding-bottom: 20px"
            v-show="isActive"
          >
            <div class="centerNamePut">
              <div class="centerInputContain">
                <div class="inputInner">
                  <div class="name">完成情况:</div>

                  <el-select
                    style="width: 240px; margin-left: 5px"
                    v-model="zhiYuanRiskCompatible"
                    :no-data-text="'无数据'"
                    placeholder="请选择"
                  >
                    <el-option label="完成" value="完成"></el-option>
                    <el-option label="未完成" value="未完成"></el-option>
                    <el-option label="不匹配" value="不匹配"></el-option>
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="未开始" value="未开始"></el-option>
                  </el-select>
                </div>

                <div class="inputInner">
                  <div class="name">研究方:</div>
                  <input
                    type="text"
                    placeholder="研究方"
                    v-model="zhiYuanRiskResearchTeam"
                  />
                </div>

                <div class="inputInner">
                  <div class="name">完成时间:</div>
                  <el-config-provider :locale="locale">
                    <el-date-picker
                      v-model="zhiYuanRiskCompletionTime"
                      style="width: 240px; margin-left: 5px"
                      type="date"
                      placeholder="完成时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </el-config-provider>
                </div>

                <div class="inputInner">
                  <div class="name">JPO报告编号:</div>
                  <input
                    type="text"
                    placeholder="JPO报告编号"
                    v-model="zhiYuanJpoReportNumber"
                  />
                </div>
                <div class="inputInner" style="margin-left: 60px">
                  <div class="name2" @click="clickUpLoad(2)">
                    上传限制区域图
                  </div>
                  <div class="name2" @click="clickUpLoad(8)">
                    上传逸散分析报告
                  </div>
                  <div
                    class="name2"
                    @click="
                      seePic(
                        this.$base +
                          '/download/shipType/' +
                          this.zhiYuanEscapismReport[0],
                        this.zhiYuanEscapismReport[0]
                      )
                    "
                  >
                    查看逸散分析报告
                  </div>
                </div>
              </div>
              <div
                class="centerPicContain"
                style="height: 400px; margin-top: 20px"
              >
                <div style="width: 100%; height: 100%">
                  <img
                    class="img1"
                    :src="src3"
                    alt=""
                    width="100%"
                    height="100%"
                    @click="seePic(src3, src3)"
                  />
                </div>
              </div>

              <div class="dialogText1" style="width: 100%">黄色限制区域</div>
              <el-input
                v-model="zhiYuanYellowRestrictedArea"
                style="width: 90%; margin: auto"
                :rows="6"
                type="textarea"
                placeholder="请输入"
              />
              <div class="dialogText1">红色限制区域</div>
              <el-input
                v-model="zhiYuanRedRestrictedArea"
                style="width: 90%; margin: auto"
                :rows="6"
                type="textarea"
                placeholder="请输入"
              />
              <div class="dialogText" style="margin-top: 10px; width: 100%">
                6.JPO报告统计
              </div>
              <div class="inputInner" style="margin-left: 50px">
                <div class="name1" @click="clickUpLoad(6)">上传JPO报告</div>
                <div
                  class="name1"
                  @click="
                    seePic(
                      this.$base +
                        '/download/shipType/' +
                        this.zhiYuanJpoReportImg[0],
                      this.zhiYuanJpoReportImg[0]
                    )
                  "
                >
                  查看JPO报告
                </div>
              </div>
            </div>
          </div>

          <!-- 淮河能源  -->
          <div
            class="centerInput1"
            style="padding-bottom: 20px"
            v-show="!isActive"
          >
            <div class="centerNamePut">
              <div class="centerInputContain">
                <div class="inputInner">
                  <div class="name">完成情况:</div>

                  <el-select
                    style="width: 240px; margin-left: 5px"
                    v-model="huaiHeRiskCompatible"
                    :no-data-text="'无数据'"
                    placeholder="请选择"
                  >
                    <el-option label="完成" value="完成"></el-option>
                    <el-option label="未完成" value="未完成"></el-option>
                    <el-option label="不匹配" value="不匹配"></el-option>
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="未开始" value="未开始"></el-option>
                  </el-select>
                </div>

                <div class="inputInner">
                  <div class="name">研究方:</div>
                  <input
                    type="text"
                    placeholder="研究方"
                    v-model="huaiHeRiskResearchTeam"
                  />
                </div>

                <div class="inputInner">
                  <div class="name">完成时间:</div>
                  <el-config-provider :locale="locale">
                    <el-date-picker
                      v-model="huaiHeRiskCompletionTime"
                      style="width: 240px; margin-left: 5px"
                      type="date"
                      placeholder="完成时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </el-config-provider>
                </div>

                <div class="inputInner">
                  <div class="name">JPO报告编号:</div>
                  <input
                    type="text"
                    placeholder="JPO报告编号"
                    v-model="huaiHeJpoReportNumber"
                  />
                </div>
                <div class="inputInner" style="margin-left: 60px">
                  <div class="name2" @click="clickUpLoad(3)">
                    上传限制区域图
                  </div>
                  <div class="name2" @click="clickUpLoad(9)">
                    上传逸散分析报告
                  </div>
                  <div
                    class="name2"
                    @click="
                      seePic(
                        this.$base +
                          '/download/shipType/' +
                          this.huaiHeEscapismReport[0],
                        this.huaiHeEscapismReport[0]
                      )
                    "
                  >
                    查看逸散分析报告
                  </div>
                </div>
                <div
                  class="centerPicContain"
                  style="height: 400px; margin-top: 20px"
                >
                  <div style="width: 100%; height: 100%">
                    <img
                      class="img1"
                      :src="src4"
                      alt=""
                      width="100%"
                      height="100%"
                      @click="seePic(src4, src4)"
                    />
                  </div>
                </div>
                <div class="dialogText1" style="margin-top: 20px">
                  黄色限制区域
                </div>
                <el-input
                  v-model="huaiHeYellowRestrictedArea"
                  style="width: 90%; margin: auto"
                  :rows="6"
                  type="textarea"
                  placeholder="请输入"
                />
                <div class="dialogText1">红色限制区域</div>
                <el-input
                  v-model="huaiHeRedRestrictedArea"
                  style="width: 90%; margin: auto"
                  :rows="6"
                  type="textarea"
                  placeholder="请输入"
                />
              </div>
              <div class="dialogText" style="margin-top: 10px; width: 100%">
                6.JPO报告统计
              </div>
              <div class="inputInner" style="margin-left: 50px">
                <div class="name1" @click="clickUpLoad(7)">上传JPO报告</div>
                <div
                  class="name1"
                  @click="
                    seePic(
                      this.$base +
                        '/download/shipType/' +
                        this.huaiHeJpoReportImg[0],
                      this.huaiHeJpoReportImg[0]
                    )
                  "
                >
                  查看JPO报告
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- accept=".xls,.xlsx" -->
    <div class="dialog2" :style="{ display: uploadfile }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile"
          @change="getFile($event)"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile()">
          确定
        </button>
      </div>
    </div>
    <div class="dialog3" :style="{ display: uploadfile1 }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile addfile1"
          @change="getFile1($event)"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp1()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile1()">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import $ from "jquery";

import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      ifClickOne: false,
      shipBottomHeight: null,
      huaiHeFilledShipModels: [],
      zhiYuanFenderPosition: ["", ""],
      zhiYuanFillPosition: [],
      zhiYuanNitrogenTubeMatching: [],
      zhiYuanFilledShipModels: [],
      fillshipCountNumber: 0,
      allshipListArr: [],
      shipTypeList: [],
      isActive: true,
      uploadfile1: "none",
      serchNum: null,
      shipPageNumer: 1,
      multi: [],
      locale: zhCn,
      totalNumber: 0,
      tableData: [],
      filledShipList: [],

      tableWidth: null,
      page: 1,
      size: 20,
      uploadfile2: "none",
      show: "none",
      addOrEdit: "新增",
      currentNum: 0,
      serialNumber: "",
      shipWidth: "",
      operatingCompany: "",
      remark: "",
      shipLength: "",
      shareShipType: [],
      shipName: "",
      shipCompany: "",
      shipNum: "",
      shipType: "",
      shipTypeNum: "",
      depthMoulded: "",
      summerMaximumDraft: "",
      cargoTankType: "",
      cargoTankCapacity: "",
      zhiYuanFillStationPosition: [],
      haiGangFlangeFeatures: "",
      haiGangModels: "",
      huaiHeCompatibilityCompatible: "",
      huaiHeFlangeFeatures: "",
      huaiHeModels: "",
      huaiHeSaddleModel: "",
      huaiHeFillingRate: "",
      huaiHeMoorCompatible: "",
      qcdc_huai_he_flag: "",
      huaiHeResearchTeam: "",
      huaiHeCompletionTime: "",
      huaiHeStsReportNumber: "",
      zhiYuanReportNumber: "",
      zhiYuanMoorCompatible: "",
      zhiYuanResearchTeam: "",
      zhiYuanCompletionTime: "",
      zhiYuanRiskCompatible: "",
      zhiYuanRiskResearchTeam: "",
      zhiYuanRiskCompletionTime: "",
      zhiYuanJpoReportNumber: "",
      huaiHeRiskCompatible: "",
      huaiHeRiskCompletionTime: "",
      huaiHeJpoReportNumber: "",
      zhiYuanCompatibilityCompatible: "",
      haiGangSaddleModel: "",
      huaiHeSaddleModel: "",
      huaiHeRiskResearchTeam: "",
      haiGangConnectorModel: "",
      huaiHeStsReportNumber: "",
      // 海港未来系泊图
      haiGangMoorImg: [],
      // 淮河能源
      huaiHeMoorImg: [],
      // 海港未来限制区域图
      haiGangRestrictedAreaImg: [],
      // 淮河能源限制区域图
      huaiHeRestrictedAreaImg: [],
      // 海港未来sts
      zhiYuanReportImg: [],
      // 淮河能源sts
      huaiHeStsReportImg: [],
      //海港未来JPO
      zhiYuanJpoReportImg: [],
      //淮河能源JPO
      huaiHeJpoReportImg: [],
      huaiHeEscapismReport: [],
      zhiYuanEscapismReport: [],
      zhiYuanRedRestrictedArea: "",
      zhiYuanYellowRestrictedArea: "",
      huaiHeYellowRestrictedArea: "",
      huaiHeRedRestrictedArea: "",
      huaiHeSaddleFlag: "",
      show1: "none",
      color: "#EBEBEB",
      color1: "#EBEBEB",
      file: null,
      fileName: "",
      jtData: null,
      token: "",
      zhiYuanExcelJson: {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      },
      huaiHeExcelJson: {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      },
      id: null,
      totalPages: null,
      uploadfile: true,
      addFileFlag: null,
      src1: "",
      src2: "",
      src3: "",
      src4: "",
      huaiHeFenderPosition: [],
      huaiHeFillStationPosition: [],
      huaiHeNitrogenTubeMatching: [],
      huaiHeFillPosition: [],
      data: {
        filledShipList: [],
        shipBottomHeight: null,
        huaiHeFillPosition: [],
        huaiHeNitrogenTubeMatching: [],
        huaiHeFillStationPosition: [],
        huaiHeFilledShipModels: [],
        huaiHeFenderPosition: [],
        zhiYuanFenderPosition: ["", ""],
        zhiYuanFillPosition: [],
        zhiYuanNitrogenTubeMatching: [],
        zhiYuanRedRestrictedArea: "",
        zhiYuanYellowRestrictedArea: "",
        zhiYuanReportImg: [],
        huaiHeStsReportNumber: "",
        // 淮河能源sts
        shipName: "",
        huaiHeStsReportImg: [],
        haiGangMoorImg: [],
        huaiHeMoorImg: [],
        huaiHeRiskResearchTeam: "",
        zhiYuanJpoReportImg: [],
        //淮河能源JPO
        huaiHeJpoReportImg: [],
        huaiHeEscapismReport: [],
        zhiYuanEscapismReport: [],
        haiGangSaddleModel: "",
        huaiHeSaddleModel: "",
        zhiYuanCompatibilityCompatible: "",
        depthMoulded: "",
        shipWidth: "",
        summerMaximumDraft: "",
        operatingCompany: "",
        cargoTankType: "",
        shipLength: "",
        shareShipType: [],
        shipCompany: "",
        shipNum: "",
        shipType: "",
        shipTypeNum: "",
        cargoTankCapacity: "",
        zhiYuanCompatibilityCompatible: "",
        haiGangFlangeFeatures: "",
        haiGangModels: "",
        haiGangSaddleModel: "",
        huaiHeCompatibilityCompatible: "",
        huaiHeFlangeFeatures: "",
        huaiHeModels: "",
        huaiHeSaddleModel: "",
        huaiHeFillingRate: "",
        qcdc_huai_he_flag: "",
        huaiHeMoorCompatible: "",
        huaiHeResearchTeam: "",
        huaiHeCompletionTime: "",
        huaiHeStsReportNumber: "",
        zhiYuanReportNumber: "",
        zhiYuanMoorCompatible: "",
        zhiYuanResearchTeam: "",
        zhiYuanCompletionTime: "",
        zhiYuanRiskCompatible: "",
        zhiYuanRiskResearchTeam: "",
        zhiYuanRiskCompletionTime: "",
        zhiYuanJpoReportNumber: "",
        huaiHeRiskCompatible: "",
        huaiHeRiskResearchTeam: "",
        huaiHeRiskCompletionTime: "",
        huaiHeJpoReportNumber: "",
        huaiHeYellowRestrictedArea: "",
        huaiHeRedRestrictedArea: "",
        haiGangConnectorModel: "",
        huaiHeSaddleFlag: "",

        ssl_connection_form: "",
        shose_connection_form: "",
        maxFillingRate: "",
        fillingStation: "",
        liquidPhaseTubeSize: "",
        meteorologicalTubeSize: "",
        nitrogenPipeType: "",
        haiGangXiBoOperationRecord: "",
        huaiHeXiBoOperationRecord: "",
        haiGangJianRongOperationRecord: "",
        huaiHeJianRongOperationRecord: "",
        haiGangLoadShip: "",
        huaiHeLoadShip: "",
        zhiYuanFillStationPosition: [],
        haiGangLoadShipModels: "",
        haiGangLoadShipSaddleModels: "",
        haiGangFilledShip: "",
        zhiYuanFilledShipModels: [],
        haiGangFilledShipSaddleModels: "",
        haiGangExcelText: "",
        huaiHeExcelText: "",
        haiGangTakeover: "",
        huaiHeLoadShipModels: "",
        huaiHeLoadShipSaddleModels: "",
        huaiHeFilledShip: "",
        huaiHeWorkArea: "",
        haiGangWorkArea: "",
        huaiHeFilledShipSaddleModels: "",
        huaiHeTakeover: "",
        huaiHeJianRongOperationRecord: "",
        fillCountNum: "",

        type: 1,
        zhiYuanExcelJson: {
          C2: "",
          C3: "",
          C4: "",
          C5: "",
          C6: "",
          C7: "",
          E2: "",
          E3: "",
          E4: "",
          E5: "",
          E6: "",
          E7: "",
          F2: "",
          F5: "",
        },
        huaiHeExcelJson: {
          C2: "",
          C3: "",
          C4: "",
          C5: "",
          C6: "",
          C7: "",
          E2: "",
          E3: "",
          E4: "",
          E5: "",
          E6: "",
          E7: "",
          F2: "",
          F5: "",
        },
        id: "",
      },

      ssl_connection_form: "",
      shose_connection_form: "",
      maxFillingRate: "",
      fillingStation: "",
      liquidPhaseTubeSize: "",
      meteorologicalTubeSize: "",
      nitrogenPipeType: "",
      haiGangXiBoOperationRecord: "",
      huaiHeXiBoOperationRecord: "",
      haiGangJianRongOperationRecord: "",
      huaiHeJianRongOperationRecord: "",
      haiGangLoadShip: "",
      huaiHeLoadShip: "",
      zhiYuanFillStationPosition: [],
      haiGangLoadShipModels: "",
      haiGangLoadShipSaddleModels: "",
      haiGangFilledShip: "",
      zhiYuanFilledShipModels: [],
      haiGangFilledShipSaddleModels: "",
      haiGangExcelText: "",
      huaiHeExcelText: "",
      haiGangTakeover: "",
      huaiHeLoadShipModels: "",
      huaiHeLoadShipSaddleModels: "",
      huaiHeFilledShip: "",
      huaiHeWorkArea: "",
      haiGangWorkArea: "",
      huaiHeFilledShipSaddleModels: "",
      huaiHeTakeover: "",
      huaiHeJianRongOperationRecord: "",
      fillCountNum: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},

  methods: {
    clickWhich(which, id) {
      this.ifClickOne = true;
      if (which == 1) {
        this.clickEdit(id);
        this.addOrEdit = "编辑";
        this.isActive = true;
      } else if (which == 2) {
        this.clickEdit(id);
        this.addOrEdit = "编辑";
        this.isActive = false;
      }
    },
    findALl() {
      service({
        method: "get",
        url: "filled-ship-list/find-all",
      }).then((e) => {});
    },
    async changeList() {
      if (this.filledShipList.length < 1) {
        this.clearCanShu();
        this.show = "none";
        this.getRenderList();
        return;
      }
      await service({
        method: "put",
        url: "filled-ship-list",
        data: this.filledShipList[this.fillshipCountNumber],
      })
        .then((e) => {
          this.fillshipCountNumber++;
          if (this.fillshipCountNumber == this.filledShipList.length) {
            this.fillshipCountNumber = 0;
            this.clearCanShu();
            this.getRenderList();
            this.show = "none";
            this.shipTypeNum = "";
            this.getRenderList();
          } else {
            this.changeList();
          }
        })
        .catch((e) => {
          this.$message({
            message: "修改船舶清单出错了",
          });
        });
    },
    addOneObject(num) {
      service({
        method: "post",
        url: "filled-ship-list",
        data: {
          chineseName: "",
          englishName: "",
          imo: "",
          shipTypeId: this.id,
        },
      }).then((e) => {
        this.filledShipList.push(e.data);
        this.$message({
          message: "新增成功",
          type: "success",
        });
      });
    },
    deleteOneObj(index) {
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `filled-ship-list/${index}`,
            }).then((e) => {
              for (let i = 0; i < this.filledShipList.length; i++) {
                if (this.filledShipList[i].id == index) {
                  this.filledShipList.splice(i, 1);
                }
              }
              this.$message({
                type: "success",
                message: "删除成功",
              });
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    getShipTypeList(a) {
      let html = ``;
      try {
        if (JSON.parse(a).length >= 0) {
          let list = JSON.parse(a);
          if (list) {
            list.forEach((item) => {
              html += `<div>${item}</div>`;
            });
          }
        }
      } catch (error) {
        if (a) {
          html += `<div></div>`;
        }
      }
      return html;
    },
    changeChoose(event) {
      if (event.target.innerHTML.includes("海港未来") == 1 && !this.isActive) {
        this.isActive = !this.isActive;
      } else if (
        event.target.innerHTML.includes("淮河新能源启航") == 1 &&
        this.isActive
      ) {
        this.isActive = !this.isActive;
      }

    },
    handleMouseOver(a) {
      try {
        a.target.children[0].style.display = "block";
      } catch (error) {}
    },
    handleMouseLeave(a) {
      try {
        a.target.children[0].style.display = "none";
      } catch (error) {}
    },
    showPromise(a) {
      let params = new URLSearchParams();
      params.append("id", a);
      this.$alert("确定复制选中的信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            axios
              .post(this.$base + "/KM_Platform/ship-type/copy", params, {
                headers: {
                  token: this.token,
                  "Content-Type": "application/x-www-form-urlencoded", // 设置请求头
                },
              })
              .then((e) => {
                if (e.data.status == "SUCCESS") {
                  this.$message({
                    message: "复制成功",
                    type: "success",
                  });
                  if (this.totalNumber % 20 == 0) {
                    this.page = this.totalPages + 1;
                  } else {
                    this.page = this.totalPages;
                  }

                  this.getRenderList();
                } else if (e.data.status == "ERROR") {
                  this.$message({
                    message: e.data.error,
                    type: "warning",
                  });
                }
              })
              .catch((e) => {
              });
          } else {
            this.$message({
              type: "info",
              message: "取消复制",
            });
          }
        },
      });
    },
    seePic(a, b) {
      if (a && b) {
        const link = document.createElement("a");
        // link.download = "image.png";
        link.href = a + "?" + new Date().getTime();
        link.target = "blank";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        return this.$message({
          message: "不存在相关文件",
          type: "warning",
        });
      }
    },
    clickUpLoad(a) {
      this.uploadfile = "block";
      this.addFileFlag = a;
    },

    // 跳转页面
    skipPage() {
      if (this.shipPageNumer <= this.totalPages && this.shipPageNumer > 0) {
        this.page = this.shipPageNumer;
        this.getRenderList();
      } else {
        this.$message({
          type: "warning",
          message: "超出页面数量范围",
        });
      }
    },

    // 导入文件================
    uploadFile() {
      this.uploadfile = "block";
    },
    uploadFile1() {
      this.uploadfile1 = "block";
    },
    uploadFile2() {
      this.uploadfile2 = "block";
    },
    getFile1(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
      document.getElementsByClassName("addfile1")[0].value = "";
    },

    cancelUp1() {
      this.file = "";
      this.fileName = "";
      this.uploadfile1 = "none";
      document.getElementsByClassName("addfile1")[0].value = "";
    },

    getFile(event) {
      this.file = event.target.files[0];
      if (
        this.addFileFlag == 0 ||
        this.addFileFlag == 1 ||
        this.addFileFlag == 2 ||
        this.addFileFlag == 3
      ) {
        if (this.file.type == "image/png" || this.file.type == "image/jpeg") {
          this.fileName = this.file.name;
        } else {
          this.file = "";
          document.getElementsByClassName("addfile")[0].value = "";
          return this.$message({
            message: "只能上传图片",
            type: "warning",
          });
        }
      } else if (
        this.addFileFlag == 4 ||
        this.addFileFlag == 5 ||
        this.addFileFlag == 6 ||
        this.addFileFlag == 7 ||
        this.addFileFlag == 8 ||
        this.addFileFlag == 9
      ) {
        if (this.file.type == "application/pdf") {
          this.fileName = this.file.name;
        } else {
          return this.$message({
            message: "只能上传PDF文件",
            type: "warning",
          });
        }
      }
      document.getElementsByClassName("addfile")[0].value = "";
    },
    submitAddFile() {
      if (this.addFileFlag == 0) {
        if (this.addOrEdit == "新增" || !this.haiGangMoorImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.haiGangMoorImg = [];
                this.haiGangMoorImg.push(res.data);
                this.haiGangMoorImg = JSON.stringify(this.haiGangMoorImg);
                this.src1 = this.$base + "/download/shipType/" + res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: JSON.parse(this.haiGangMoorImg)[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.haiGangMoorImg = [];
              this.haiGangMoorImg.push(res.data);
              this.haiGangMoorImg = JSON.stringify(this.haiGangMoorImg);
              this.src1 =
                this.$base +
                "/download/shipType/" +
                res.data +
                "?" +
                new Date().getTime();
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 1) {
        if (this.addOrEdit == "新增" || !this.huaiHeMoorImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeMoorImg = [];
                this.huaiHeMoorImg.push(res.data);
                this.huaiHeMoorImg = JSON.stringify(this.huaiHeMoorImg);
                this.src2 = this.$base + "/download/shipType/" + res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: JSON.parse(this.huaiHeMoorImg)[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeMoorImg = [];
              this.huaiHeMoorImg.push(res.data);
              this.huaiHeMoorImg = JSON.stringify(this.huaiHeMoorImg);
              this.src2 =
                this.$base +
                "/download/shipType/" +
                res.data +
                "?" +
                new Date().getTime();
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 2) {
        if (this.addOrEdit == "新增" || !this.haiGangRestrictedAreaImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.haiGangRestrictedAreaImg = [];
                this.haiGangRestrictedAreaImg.push(res.data);
                this.haiGangRestrictedAreaImg = JSON.stringify(
                  this.haiGangRestrictedAreaImg
                );
                this.src3 = this.$base + "/download/shipType/" + res.data;
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: JSON.parse(this.haiGangRestrictedAreaImg)[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.haiGangRestrictedAreaImg = [];
              this.haiGangRestrictedAreaImg.push(res.data);
              this.haiGangRestrictedAreaImg = JSON.stringify(
                this.haiGangRestrictedAreaImg
              );
              this.src3 =
                this.$base +
                "/download/shipType/" +
                res.data +
                "?" +
                new Date().getTime();
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 3) {
        if (this.addOrEdit == "新增" || !this.huaiHeRestrictedAreaImg) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeRestrictedAreaImg = [];
                this.huaiHeRestrictedAreaImg.push(res.data);
                this.huaiHeRestrictedAreaImg = JSON.stringify(
                  this.huaiHeRestrictedAreaImg
                );
                this.src4 =
                  this.$base +
                  "/download/shipType/" +
                  res.data +
                  "?" +
                  new Date().getTime();
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: JSON.parse(this.huaiHeRestrictedAreaImg)[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeRestrictedAreaImg = [];
              this.huaiHeRestrictedAreaImg.push(res.data);
              this.huaiHeRestrictedAreaImg = JSON.stringify(
                this.huaiHeRestrictedAreaImg
              );
              this.src4 =
                this.$base +
                "/download/shipType/" +
                res.data +
                "?" +
                new Date().getTime();
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 4) {
        if (this.addOrEdit == "新增" || !this.zhiYuanReportImg[0]) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.zhiYuanReportImg.push(res.data);
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: this.zhiYuanReportImg[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.zhiYuanReportImg[0] = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 5) {
        if (this.addOrEdit == "新增" || !this.huaiHeStsReportImg[0]) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeStsReportImg.push(res.data);
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: this.huaiHeStsReportImg[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeStsReportImg[0] = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 6) {
        if (this.addOrEdit == "新增" || !this.zhiYuanJpoReportImg[0]) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.zhiYuanJpoReportImg.push(res.data);
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: this.zhiYuanJpoReportImg[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.zhiYuanJpoReportImg[0] = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 7) {
        if (this.addOrEdit == "新增" || !this.huaiHeJpoReportImg[0]) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeJpoReportImg.push(res.data);
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: this.huaiHeJpoReportImg[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeJpoReportImg[0] = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 8) {
        if (this.addOrEdit == "新增" || !this.zhiYuanEscapismReport[0]) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.zhiYuanEscapismReport.push(res.data);
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: this.zhiYuanEscapismReport[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.zhiYuanEscapismReport[0] = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      } else if (this.addFileFlag == 9) {
        if (this.addOrEdit == "新增" || !this.huaiHeEscapismReport[0]) {
          if (this.file) {
            let data = {
              file: this.file,
              type: 3,
              fileName: "",
            };
            service({
              method: "post",
              url: "/system/upload-file",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              data: data,
            })
              .then((res) => {
                this.$message({
                  message: "文件选择成功",
                  type: "success",
                });
                this.uploadfile = "none";
                this.huaiHeEscapismReport.push(res.data);
              })
              .catch((err) => {
                this.$message({
                  message: err,
                  type: "fail",
                });
              });
          } else {
            this.$message({
              message: "请先选择文件再上传",
              type: "warning",
            });
          }
        } else {
          let data = {
            file: this.file,
            type: 3,
            fileName: this.huaiHeEscapismReport[0],
          };
          service({
            method: "post",
            url: "/system/upload-file",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              this.$message({
                message: "更换文件选择成功",
                type: "success",
              });
              this.uploadfile = "none";
              this.huaiHeEscapismReport[0] = res.data;
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "fail",
              });
            });
        }
      }
      this.fileName = "";
      this.getRenderList();
      document.getElementsByClassName("addfile")[0].value = "";
    },

    indexNumber(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    handleRowDblclick(row) {
      this.ifClickOne = false;
      this.clickEdit(row.id);
    },
    // 批量删除开始========================
    selecttableFunction(row) {
      if (row.length > 0) {
        this.multi = [];
        row.forEach((element) => {
          this.multi.push(element.id);
        });
      } else {
        this.multi = [];
      }
    },
    deleteMulti() {
      // let that = this;
      if (this.multi.length == 0) {
        return this.$message({
          type: "warning",
          message: "请先选中再进行批量删除操作！",
        });
      }
      let data = {
        idList: this.multi + "",
      };

      this.$alert("确定删除选中的信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/ship-type`,
              params: data,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                if (this.currentNum == this.multi.length && this.page > 1) {
                  this.page--;
                }
                this.getRenderList();
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    //批量删除结束=============================

    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
      // 自定义序号显示，比如增加分页后的偏移量
      // return (this.page - 1) * this.size + index + 1;
    },
    cancelUp() {
      this.file = "";
      this.fileName = "";
      this.uploadfile = "none";
      document.getElementsByClassName("addfile")[0].value = "";
    },
    // 导入文件结束=============
    clickEdit(a) {
      this.addOrEdit = "编辑";

      this.src1 = "";
      this.src2 = "";
      this.src3 = "";
      this.src4 = "";
      this.tableData.forEach((item) => {
        if (item.id == a) {
          this.id = a;
          this.shipBottomHeight = item.shipBottomHeight;
          if (item.huaiHeNitrogenTubeMatching) {
            this.huaiHeNitrogenTubeMatching = JSON.parse(
              item.huaiHeNitrogenTubeMatching
            );
          } else {
            this.huaiHeNitrogenTubeMatching = [];
          }

          if (item.huaiHeFillStationPosition) {
            this.huaiHeFillStationPosition = JSON.parse(
              item.huaiHeFillStationPosition
            );
          } else {
            this.huaiHeFillStationPosition = [];
          }

          try {
            if (JSON.parse(item.huaiHeFillPosition).length > 0) {
              this.huaiHeFillPosition = JSON.parse(item.huaiHeFillPosition);
            }
          } catch (error) {
            this.huaiHeFillPosition = ["", ""];
          }
          if (item.huaiHeFilledShipModels) {
            this.huaiHeFilledShipModels = JSON.parse(
              item.huaiHeFilledShipModels
            );
          } else {
            this.huaiHeFilledShipModels = [];
          }
          if (item.huaiHeFenderPosition) {
            this.huaiHeFenderPosition = JSON.parse(item.huaiHeFenderPosition);
          } else {
            this.huaiHeFenderPosition = [];
          }

          try {
            if (JSON.parse(item.zhiYuanFenderPosition).length > 0) {
              this.zhiYuanFenderPosition = JSON.parse(
                item.zhiYuanFenderPosition
              );
            }
          } catch (error) {
            this.zhiYuanFenderPosition = ["", ""];
          }

          if (item.zhiYuanFillPosition) {
            this.zhiYuanFillPosition = JSON.parse(item.zhiYuanFillPosition);
          } else {
            this.zhiYuanFillPosition = [];
          }

          if (item.zhiYuanNitrogenTubeMatching) {
            this.zhiYuanNitrogenTubeMatching = JSON.parse(
              item.zhiYuanNitrogenTubeMatching
            );
          } else {
            this.zhiYuanNitrogenTubeMatching = [];
          }
          if (item.zhiYuanFillStationPosition) {
            this.zhiYuanFillStationPosition = JSON.parse(
              item.zhiYuanFillStationPosition
            );
          } else {
            this.zhiYuanFillStationPosition = [];
          }
          if (item.zhiYuanFilledShipModels) {
            this.zhiYuanFilledShipModels = JSON.parse(
              item.zhiYuanFilledShipModels
            );
          } else {
            this.zhiYuanFilledShipModels = [];
          }

          if (item.zhiYuanExcelJson) {
            this.zhiYuanExcelJson = JSON.parse(item.zhiYuanExcelJson);
          }
          if (item.huaiHeExcelJson) {
            this.huaiHeExcelJson = JSON.parse(item.huaiHeExcelJson);
          }
          this.shipName = item.shipName;
          this.huaiHeStsReportNumber = item.huaiHeStsReportNumber;
          this.fillCountNum = item.fillCountNum;
          this.haiGangConnectorModel = item.haiGangConnectorModel;
          this.zhiYuanRedRestrictedArea = item.zhiYuanRedRestrictedArea;
          this.zhiYuanYellowRestrictedArea = item.zhiYuanYellowRestrictedArea;
          this.huaiHeYellowRestrictedArea = item.huaiHeYellowRestrictedArea;
          this.huaiHeRedRestrictedArea = item.huaiHeRedRestrictedArea;

          this.filledShipList = item.filledShipList;

          this.haiGangSaddleModel = item.haiGangSaddleModel;

          this.haiGangRestrictedAreaImg = item.haiGangRestrictedAreaImg;
          // 淮河能源限制区域图
          this.huaiHeRestrictedAreaImg = item.huaiHeRestrictedAreaImg;
          this.haiGangMoorImg = item.haiGangMoorImg;
          this.huaiHeMoorImg = item.huaiHeMoorImg;
          this.shipWidth = item.shipWidth;
          this.operatingCompany = item.operatingCompany;
          this.shipLength = item.shipLength;

          try {
            if (item.huaiHeJpoReportImg) {
              this.huaiHeJpoReportImg = JSON.parse(item.huaiHeJpoReportImg);
            } else {
              this.huaiHeJpoReportImg = [];
            }
          } catch (error) {}
          try {
            if (item.huaiHeEscapismReport) {
              this.huaiHeEscapismReport = JSON.parse(item.huaiHeEscapismReport);
            } else {
              this.huaiHeEscapismReport = [];
            }
          } catch (error) {}
          try {
            if (item.zhiYuanEscapismReport) {
              this.zhiYuanEscapismReport = JSON.parse(
                item.zhiYuanEscapismReport
              );
            } else {
              this.zhiYuanEscapismReport = [];
            }
          } catch (error) {}

          try {
            if (item.zhiYuanReportImg) {
              this.zhiYuanReportImg = JSON.parse(item.zhiYuanReportImg);
            } else {
              this.zhiYuanReportImg = [];
            }
          } catch (error) {}
          try {
            if (item.huaiHeStsReportImg) {
              this.huaiHeStsReportImg = JSON.parse(item.huaiHeStsReportImg);
            } else {
              this.huaiHeStsReportImg = [];
            }
          } catch (error) {}
          try {
            if (item.zhiYuanJpoReportImg) {
              this.zhiYuanJpoReportImg = JSON.parse(item.zhiYuanJpoReportImg);
              //淮河能源JPO
            } else {
              this.zhiYuanJpoReportImg = [];
            }
          } catch (error) {}
          try {
            if (JSON.parse(item.shareShipType).length > 0) {
              this.shareShipType = JSON.parse(item.shareShipType);
            }
          } catch (error) {
            if (item.shareShipType) {
              this.shareShipType = [];
              this.shareShipType.push(item.shareShipType);
            } else {
              this.shareShipType = [];
            }
          }
          this.shipCompany = item.shipCompany;
          this.shipNum = item.shipNum;
          this.shipType = item.shipType;
          this.shipTypeNum = item.shipTypeNum;
          this.depthMoulded = item.depthMoulded;
          this.summerMaximumDraft = item.summerMaximumDraft;
          this.cargoTankType = item.cargoTankType;
          this.cargoTankCapacity = item.cargoTankCapacity;

          this.haiGangFlangeFeatures = item.haiGangFlangeFeatures;
          this.haiGangModels = item.haiGangModels;
          this.huaiHeCompatibilityCompatible =
            item.huaiHeCompatibilityCompatible;
          this.huaiHeFlangeFeatures = item.huaiHeFlangeFeatures;
          this.huaiHeModels = item.huaiHeModels;

          this.huaiHeFillingRate = item.huaiHeFillingRate;
          this.huaiHeMoorCompatible = item.huaiHeMoorCompatible;

          this.ssl_connection_form = item.ssl_connection_form;
          this.shose_connection_form = item.shose_connection_form;
          this.maxFillingRate = item.maxFillingRate;
          this.fillingStation = item.fillingStation;
          this.liquidPhaseTubeSize = item.liquidPhaseTubeSize;
          this.meteorologicalTubeSize = item.meteorologicalTubeSize;
          this.nitrogenPipeType = item.nitrogenPipeType;
          this.haiGangXiBoOperationRecord = item.haiGangXiBoOperationRecord;
          this.huaiHeXiBoOperationRecord = item.huaiHeXiBoOperationRecord;
          this.haiGangJianRongOperationRecord =
            item.haiGangJianRongOperationRecord;
          this.huaiHeJianRongOperationRecord =
            item.huaiHeJianRongOperationRecord;
          this.haiGangLoadShip = item.haiGangLoadShip;
          this.huaiHeLoadShip = item.huaiHeLoadShip;

          this.haiGangLoadShipModels = item.haiGangLoadShipModels;
          this.haiGangLoadShipSaddleModels = item.haiGangLoadShipSaddleModels;
          this.haiGangFilledShip = item.haiGangFilledShip;

          this.haiGangFilledShipSaddleModels =
            item.haiGangFilledShipSaddleModels;
          this.huaiHeExcelText = item.haiGangExcelText;
          this.haiGangExcelText = item.haiGangExcelText;
          this.haiGangTakeover = item.haiGangTakeover;

          this.huaiHeLoadShipModels = item.huaiHeLoadShipModels;
          this.huaiHeLoadShipSaddleModels = item.huaiHeLoadShipSaddleModels;
          this.huaiHeFilledShip = item.huaiHeFilledShip;
          this.huaiHeWorkArea = item.huaiHeWorkArea;
          this.haiGangWorkArea = item.haiGangWorkArea;

          this.huaiHeFilledShipSaddleModels = item.huaiHeFilledShipSaddleModels;
          this.huaiHeTakeover = item.huaiHeTakeover;
          this.huaiHeJianRongOperationRecord =
            item.huaiHeJianRongOperationRecord;

          this.huaiHeResearchTeam = item.huaiHeResearchTeam;
          this.huaiHeCompletionTime = item.huaiHeCompletionTime;
          this.huaiHeStsReportNumber = item.huaiHeStsReportNumber;
          this.zhiYuanReportNumber = item.zhiYuanReportNumber;
          this.zhiYuanMoorCompatible = item.zhiYuanMoorCompatible;
          this.zhiYuanResearchTeam = item.zhiYuanResearchTeam;
          this.zhiYuanCompletionTime = item.zhiYuanCompletionTime;
          this.zhiYuanRiskCompatible = item.zhiYuanRiskCompatible;
          this.zhiYuanRiskResearchTeam = item.zhiYuanRiskResearchTeam;
          this.zhiYuanRiskCompletionTime = item.zhiYuanRiskCompletionTime;
          this.zhiYuanJpoReportNumber = item.zhiYuanJpoReportNumber;
          this.huaiHeRiskCompatible = item.huaiHeRiskCompatible;
          this.huaiHeRiskCompletionTime = item.huaiHeRiskCompletionTime;
          this.huaiHeJpoReportNumber = item.huaiHeJpoReportNumber;
          this.zhiYuanCompatibilityCompatible =
            item.zhiYuanCompatibilityCompatible;
          this.huaiHeRiskResearchTeam = item.huaiHeRiskResearchTeam;
          this.id = a;

          try {
            this.src1 =
              this.$base +
              "/download/shipType/" +
              JSON.parse(item.haiGangMoorImg)[0] +
              "?" +
              new Date().getTime();
          } catch (error) {}
          try {
            this.src2 =
              this.$base +
              "/download/shipType/" +
              JSON.parse(item.huaiHeMoorImg)[0] +
              "?" +
              new Date().getTime();
          } catch (error) {}
          try {
            this.src3 =
              this.$base +
              "/download/shipType/" +
              JSON.parse(item.haiGangRestrictedAreaImg)[0] +
              "?" +
              new Date().getTime();
          } catch (error) {}
          try {
            this.src4 =
              this.$base +
              "/download/shipType/" +
              JSON.parse(item.huaiHeRestrictedAreaImg)[0] +
              "?" +
              new Date().getTime();
          } catch (error) {}
        }
        this.show = "block";
      });
    },

    sureAdd() {
      if (!this.shipTypeNum || !this.shipName) {
        return this.$message({
          message: "船型编号和船舶名不能为空！",
          type: "warning",
        });
      }
      this.data.zhiYuanNitrogenTubeMatching = JSON.stringify(
        this.zhiYuanNitrogenTubeMatching
      );
      // this.data.filledShipList = this.filledShipList;
      if (this.filledShipList.length == 0) {
        // this.data.filledShipList = [
        //   {
        //     chineseName: "",
        //     englishName: "",
        //     id: 699,
        //     imo: "",
        //     shipTypeId: this.id,
        //   },
        // ];
      }
      this.data.id = this.id;
      this.data.shipBottomHeight = this.shipBottomHeight;

      this.data.huaiHeFillPosition = JSON.stringify(this.huaiHeFillPosition);
      this.data.huaiHeNitrogenTubeMatching = JSON.stringify(
        this.huaiHeNitrogenTubeMatching
      );
      this.data.huaiHeFillStationPosition = JSON.stringify(
        this.huaiHeFillStationPosition
      );
      this.data.huaiHeFilledShipModels = JSON.stringify(
        this.huaiHeFilledShipModels
      );
      this.data.huaiHeFenderPosition = JSON.stringify(
        this.huaiHeFenderPosition
      );
      this.data.zhiYuanFillPosition = JSON.stringify(this.zhiYuanFillPosition);
      this.data.zhiYuanFenderPosition = JSON.stringify(
        this.zhiYuanFenderPosition
      );
      if (this.huaiHeSaddleFlag == "是") {
        this.data.huaiHeSaddleFlag = true;
      } else if (this.huaiHeSaddleFlag == "否") {
        this.data.huaiHeSaddleFlag = false;
      } else {
        this.data.huaiHeSaddleFlag = this.huaiHeSaddleFlag;
      }

      this.data.shipName = this.shipName;
      this.data.huaiHeStsReportNumber = this.huaiHeStsReportNumber;
      this.data.fillCountNum = this.fillCountNum;
      this.data.haiGangConnectorModel = this.haiGangConnectorModel;
      this.data.zhiYuanExcelJson = JSON.stringify(this.zhiYuanExcelJson);
      this.data.huaiHeExcelJson = JSON.stringify(this.huaiHeExcelJson);
      this.data.zhiYuanRedRestrictedArea = this.zhiYuanRedRestrictedArea;
      this.data.zhiYuanYellowRestrictedArea = this.zhiYuanYellowRestrictedArea;
      this.data.huaiHeYellowRestrictedArea = this.huaiHeYellowRestrictedArea;
      this.data.huaiHeRedRestrictedArea = this.huaiHeRedRestrictedArea;
      this.data.zhiYuanJpoReportImg = JSON.stringify(this.zhiYuanJpoReportImg);
      //淮河能源JPO
      this.data.huaiHeJpoReportImg = JSON.stringify(this.huaiHeJpoReportImg);
      this.data.huaiHeEscapismReport = JSON.stringify(
        this.huaiHeEscapismReport
      );
      this.data.zhiYuanEscapismReport = JSON.stringify(
        this.zhiYuanEscapismReport
      );
      this.data.zhiYuanReportImg = JSON.stringify(this.zhiYuanReportImg);
      this.data.huaiHeStsReportImg = JSON.stringify(this.huaiHeStsReportImg);
      this.data.haiGangMoorImg = this.haiGangMoorImg;
      this.data.huaiHeMoorImg = this.huaiHeMoorImg;
      this.data.haiGangRestrictedAreaImg = this.haiGangRestrictedAreaImg;
      this.data.huaiHeRestrictedAreaImg = this.huaiHeRestrictedAreaImg;
      this.data.huaiHeRiskResearchTeam = this.huaiHeRiskResearchTeam;

      this.data.shipWidth = this.shipWidth;
      this.data.operatingCompany = this.operatingCompany;
      this.data.shipLength = this.shipLength;
      this.data.shareShipType = JSON.stringify(this.shareShipType);
      this.data.shipCompany = this.shipCompany;
      this.data.shipNum = this.shipNum;
      this.data.shipType = this.shipType;
      this.data.shipTypeNum = this.shipTypeNum;
      this.data.depthMoulded = this.depthMoulded;
      this.data.summerMaximumDraft = this.summerMaximumDraft;
      this.data.cargoTankType = this.cargoTankType;
      this.data.cargoTankCapacity = this.cargoTankCapacity;

      this.data.haiGangFlangeFeatures = this.haiGangFlangeFeatures;
      this.data.haiGangModels = this.haiGangModels;
      this.data.huaiHeCompatibilityCompatible =
        this.huaiHeCompatibilityCompatible;
      this.data.huaiHeFlangeFeatures = this.huaiHeFlangeFeatures;
      this.data.huaiHeModels = this.huaiHeModels;
      this.data.huaiHeSaddleModel = this.huaiHeSaddleModel;
      this.data.huaiHeFillingRate = this.huaiHeFillingRate;
      this.data.huaiHeMoorCompatible = this.huaiHeMoorCompatible;

      if (this.qcdc_huai_he_flag == "是") {
        this.data.qcdc_huai_he_flag = true;
      } else if (this.qcdc_huai_he_flag == "否") {
        this.data.qcdc_huai_he_flag = false;
      } else {
        this.data.qcdc_huai_he_flag = this.qcdc_huai_he_flag;
      }
      this.data.huaiHeResearchTeam = this.huaiHeResearchTeam;
      this.data.huaiHeCompletionTime = this.huaiHeCompletionTime;
      this.data.huaiHeStsReportNumber = this.huaiHeStsReportNumber;
      this.data.zhiYuanReportNumber = this.zhiYuanReportNumber;
      this.data.zhiYuanMoorCompatible = this.zhiYuanMoorCompatible;
      this.data.zhiYuanResearchTeam = this.zhiYuanResearchTeam;
      this.data.zhiYuanCompletionTime = this.zhiYuanCompletionTime;
      this.data.zhiYuanRiskCompatible = this.zhiYuanRiskCompatible;
      this.data.zhiYuanRiskResearchTeam = this.zhiYuanRiskResearchTeam;
      this.data.zhiYuanRiskCompletionTime = this.zhiYuanRiskCompletionTime;
      this.data.zhiYuanJpoReportNumber = this.zhiYuanJpoReportNumber;
      this.data.huaiHeRiskCompatible = this.huaiHeRiskCompatible;
      this.data.huaiHeRiskCompletionTime = this.huaiHeRiskCompletionTime;
      this.data.huaiHeJpoReportNumber = this.huaiHeJpoReportNumber;
      this.data.zhiYuanCompatibilityCompatible =
        this.zhiYuanCompatibilityCompatible;
      this.data.type = 1;

      this.data.ssl_connection_form = this.ssl_connection_form;
      this.data.shose_connection_form = this.shose_connection_form;
      this.data.maxFillingRate = this.maxFillingRate;
      this.data.fillingStation = this.fillingStation;
      this.data.liquidPhaseTubeSize = this.liquidPhaseTubeSize;
      this.data.meteorologicalTubeSize = this.meteorologicalTubeSize;
      this.data.nitrogenPipeType = this.nitrogenPipeType;
      this.data.haiGangXiBoOperationRecord = this.haiGangXiBoOperationRecord;
      this.data.huaiHeXiBoOperationRecord = this.huaiHeXiBoOperationRecord;
      this.data.haiGangJianRongOperationRecord =
        this.haiGangJianRongOperationRecord;
      this.data.huaiHeJianRongOperationRecord =
        this.huaiHeJianRongOperationRecord;
      this.data.haiGangLoadShip = this.haiGangLoadShip;
      this.data.huaiHeLoadShip = this.huaiHeLoadShip;
      this.data.zhiYuanFillStationPosition = JSON.stringify(
        this.zhiYuanFillStationPosition
      );
      this.data.haiGangLoadShipModels = this.haiGangLoadShipModels;
      this.data.haiGangLoadShipSaddleModels = this.haiGangLoadShipSaddleModels;
      this.data.haiGangFilledShip = this.haiGangFilledShip;
      this.data.zhiYuanFilledShipModels = JSON.stringify(
        this.zhiYuanFilledShipModels
      );
      this.data.haiGangFilledShipSaddleModels =
        this.haiGangFilledShipSaddleModels;
      this.data.haiGangExcelText = this.haiGangExcelText;
      this.data.huaiHeExcelText = this.huaiHeExcelText;
      this.data.haiGangTakeover = this.haiGangTakeover;

      this.data.huaiHeLoadShipModels = this.huaiHeLoadShipModels;
      this.data.huaiHeLoadShipSaddleModels = this.huaiHeLoadShipSaddleModels;
      this.data.huaiHeFilledShip = this.huaiHeFilledShip;
      this.data.huaiHeWorkArea = this.huaiHeWorkArea;
      this.data.haiGangWorkArea = this.haiGangWorkArea;

      this.data.huaiHeFilledShipSaddleModels =
        this.huaiHeFilledShipSaddleModels;
      this.data.huaiHeTakeover = this.huaiHeTakeover;
      this.data.huaiHeJianRongOperationRecord =
        this.huaiHeJianRongOperationRecord;

      // return
      if (this.addOrEdit == "编辑") {
        service({
          method: "put",
          data: this.data,
          url: "/ship-type",
          // headers: {
          //   "Content-Type": "multipart/form-data",
          // },
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.changeList();
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      } else {
        service({
          method: "post",
          data: this.data,
          url: "/ship-type",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.filledShipList.forEach((item) => {
                item.shipTypeId = r.data.id;
              });
              this.changeList();

              // this.clearCanShu();
              this.show = "none";
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
    },
    // 删除数据
    deleteOne(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/ship-type/${a}`,
            })
              .then((r) => {
                if (r.status == "SUCCESS") {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  if (this.currentNum == 1 && this.page > 1) {
                    this.page--;
                  }
                  this.getRenderList();
                  this.show = "none";
                }
              })
              .catch((err) => {
                this.$message({
                  type: "warning",
                  message: "出错了！",
                });
              });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 弹窗确认按钮
    deleteOne2(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/filled-ship-list/${a}`,
            })
              .then((r) => {
                if (r.status == "SUCCESS") {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  if (this.currentNum == 1 && this.page > 1) {
                    this.page--;
                  }
                  this.getRenderList();
                }
              })
              .catch((err) => {
                this.$message({
                  type: "warning",
                  message: "出错了！",
                });
              });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    reduceDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },
    // 关闭弹窗
    close() {
      this.show = "none";
      this.show1 = "none";
      this.uploadfile = "none";
      this.uploadfile1 = "none";
      this.uploadfile2 = "none";
      this.clearCanShu();
    },
    // 新增
    addOne() {
      this.src1 = "";
      this.src2 = "";
      this.src3 = "";
      this.src4 = "";
      this.clearCanShu();
      let that = this;
      this.addOrEdit = "新增";
      // this.$refs["dialog"].style.display = show;
      this.show = "block";
    },
    // 导出文件
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();
      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },

    // 导出文件
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();
      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },
    async getExcelFile() {
      let that = this;
      let time = this.getFileName();
      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);
      axios({
        method: "get",
        url: this.$loadFile + "/fill-data/export",
        responseType: "blob", // 关键：设置响应类型为blob
        data: {
          fileName: "装载作业",
        },
        headers: {
          token: that.token,
        },
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          // 创建一个隐藏的<a>标签，并设置其href属性为上面创建的URL
          const link = document.createElement("a");
          link.href = url;

          link.download = "船型总表-" + time + ".xls"; // 替
          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({
            message: "文件下载失败",
            type: "info",
          });
        });
    },
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },
    async getExcelFile1() {
      let that = this;
      let time = this.getFileName();

      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);

      axios({
        method: "get",
        url: this.$loadFile + "/ship-type/export",
        responseType: "blob", // 关键：设置响应类型为blob
        params: {
          type: 1,
        },
        headers: {
          token: that.token,
        },
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          // 创建一个隐藏的<a>标签，并设置其href属性为上面创建的URL
          const link = document.createElement("a");
          link.href = url;

          link.download = "甲醇船舶基本信息-" + time + ".xls"; // 替

          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({
            message: "文件下载失败",
            type: "info",
          });
        });
    },

    submitAddFile1(a) {
      if (this.file) {
        let data = {
          file: this.file,
          type: 1,
        };
        service({
          method: "post",
          url: "/ship-type/upload",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            document.getElementsByClassName("addfile")[0].value = "";
            this.$message({
              message: "上传成功",
              type: "success",
            });
            this.file = "";
            this.fileName = "";
            this.uploadfile1 = "none";
            this.getRenderList();
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        this.$message({
          message: "请先选择文件再上传",
          type: "warning",
        });
      }
    },

    async getShipType() {
      // /ship-type/get-ship-type-num
      let data = {
        type: 1,
      };
      // axios({
      //   methods: "post",
      //   url: "http://146.56.228.3/KM_Platform/ship-type/get-ship-type-num?type=0",
      //   headers: {
      //     token: this.token,
      //   },
      // }).then((e) => {

      // });
      await service({
        method: "post",
        url: "/ship-type/get-ship-type-num",
        params: data,
      })
        .then((e) => {
          this.shipTypeList = e.data;
        })
        .catch((err) => {
        });
    },
    // 获取列表数据
    async getRenderList() {
      let data = {};
      if (this.serchNum) {
        data = {
          page: this.page,
          size: this.size,
          type: 1,
          shipTypeNum: this.serchNum,
        };
      } else {
        data = {
          page: this.page,
          size: this.size,
          type: 1,
        };
      }
      await service({
        methods: "get",
        url: "/ship-type/find-one-page",
        params: data,
      })
        .then((e) => {
          this.totalPages = e.data.totalPages;
          this.totalNumber = e.data.totalElements;
          if (this.totalPages == 0) {
            this.totalPages = 1;
          }
          if (this.page < this.totalPages) {
            this.color1 = "#268FDE";
          } else {
            this.color1 = "#EBEBEB";
          }
          if (this.page == 1) {
            this.color = "#EBEBEB";
          } else {
            this.color = "#268FDE";
          }
          this.tableData = e.data.content;
          if (this.id) {
            this.tableData.forEach((item) => {
              if (item.id == this.id) {
                this.allshipListArr = item.filledShipList;
              }
            });
          }
          this.currentNum = e.data.numberOfElements;
        })
        .catch((err) => {});
    },
    formatterDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}/${month}/${day}`;
    },
    clearCanShu() {
      this.ifClickOne = false;
      this.filledShipList = [];
      this.shipBottomHeight = null;
      this.huaiHeFenderPosition = [];
      this.zhiYuanFenderPosition = ["", ""];
      this.zhiYuanFillPosition = [];
      this.zhiYuanNitrogenTubeMatching = [];
      this.huaiHeRiskResearchTeam = "";
      this.haiGangSaddleModel = "";
      this.zhiYuanCompatibilityCompatible = "";
      this.depthMoulded = "";
      this.huaiHeStsReportNumber = "";
      this.shipWidth = "";
      this.summerMaximumDraft = "";
      this.operatingCompany = "";
      this.cargoTankType = "";
      this.shipLength = "";
      this.shipName = "";
      this.shareShipType = [];
      this.shipCompany = "";
      this.shipNum = "";
      this.shipType = "";
      this.shipTypeNum = "";
      this.cargoTankCapacity = "";
      this.zhiYuanCompatibilityCompatible = "";
      this.zhiYuanFillStationPosition = [];
      this.haiGangFlangeFeatures = "";
      this.haiGangModels = "";
      this.haiGangSaddleModel = "";
      this.huaiHeCompatibilityCompatible = "";

      this.huaiHeFlangeFeatures = "";
      this.huaiHeModels = "";
      this.huaiHeSaddleModel = "";
      this.huaiHeFillingRate = "";
      this.qcdc_huai_he_flag = "";
      this.huaiHeMoorCompatible = "";
      this.huaiHeResearchTeam = "";
      this.huaiHeCompletionTime = "";
      this.huaiHeStsReportNumber = "";
      this.zhiYuanReportNumber = "";
      this.zhiYuanMoorCompatible = "";
      this.zhiYuanResearchTeam = "";
      this.zhiYuanCompletionTime = "";
      this.zhiYuanRiskCompatible = "";
      this.zhiYuanRiskResearchTeam = "";
      this.zhiYuanRiskCompletionTime = "";
      this.zhiYuanJpoReportNumber = "";
      this.huaiHeRiskCompatible = "";
      this.huaiHeRiskResearchTeam = "";
      this.huaiHeRiskCompletionTime = "";
      this.huaiHeJpoReportNumber = "";
      this.huaiHeSaddleFlag = "";
      this.haiGangMoorImg = null;
      this.huaiHeMoorImg = null;
      this.haiGangRestrictedAreaImg = "";
      this.huaiHeRestrictedAreaImg = "";
      this.zhiYuanReportImg = [];
      this.huaiHeStsReportImg = [];
      this.zhiYuanJpoReportImg = [];
      this.huaiHeJpoReportImg = [];
      this.huaiHeEscapismReport = [];
      this.zhiYuanEscapismReport = [];
      this.zhiYuanRedRestrictedArea = "";
      this.zhiYuanYellowRestrictedArea = "";
      this.huaiHeYellowRestrictedArea = "";
      this.huaiHeRedRestrictedArea = "";
      this.haiGangConnectorModel = "";

      this.fillingStation = "";
      this.ssl_connection_form = "";
      this.shose_connection_form = "";
      this.maxFillingRate = "";
      this.liquidPhaseTubeSize = "";
      this.meteorologicalTubeSize = "";
      this.nitrogenPipeType = "";
      this.haiGangXiBoOperationRecord = "";
      this.huaiHeXiBoOperationRecord = "";
      this.haiGangJianRongOperationRecord = "";
      this.huaiHeJianRongOperationRecord = "";
      this.haiGangLoadShip = "";
      this.huaiHeLoadShip = "";
      this.haiGangLoadShipModels = "";
      this.haiGangLoadShipSaddleModels = "";
      this.haiGangFilledShip = "";
      this.zhiYuanFilledShipModels = [];
      this.haiGangFilledShipSaddleModels = "";
      this.haiGangExcelText = "";
      this.huaiHeExcelText = "";
      this.haiGangTakeover = "";
      this.huaiHeLoadShipModels = "";
      this.huaiHeLoadShipSaddleModels = "";
      this.huaiHeFilledShip = "";
      this.huaiHeWorkArea = "";
      this.haiGangWorkArea = "";
      this.huaiHeFilledShipSaddleModels = "";
      this.huaiHeTakeover = "";
      this.huaiHeJianRongOperationRecord = "";
      this.fillCountNum = "";
      this.zhiYuanExcelJson = {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      };
      this.huaiHeExcelJson = {
        C2: "",
        C3: "",
        C4: "",
        C5: "",
        C6: "",
        C7: "",
        E2: "",
        E3: "",
        E4: "",
        E5: "",
        E6: "",
        E7: "",
        F2: "",
        F5: "",
      };
      this.huaiHeFilledShipModels = [];
      this.huaiHeFillStationPosition = [];
      this.huaiHeNitrogenTubeMatching = [];
      this.huaiHeFillPosition = [];
      this.id = "";
      this.data = {
        filledShipList: [],
        shipBottomHeight: null,
        huaiHeFillPosition: [],
        huaiHeNitrogenTubeMatching: [],
        huaiHeFillStationPosition: [],
        huaiHeFilledShipModels: [],
        huaiHeFenderPosition: [],
        zhiYuanFenderPosition: ["", ""],
        zhiYuanFillPosition: [],
        zhiYuanNitrogenTubeMatching: [],
        huaiHeRiskResearchTeam: "",
        haiGangSaddleModel: "",
        zhiYuanCompatibilityCompatible: "",
        depthMoulded: "",
        shipWidth: "",
        summerMaximumDraft: "",
        operatingCompany: "",
        huaiHeStsReportNumber: "",
        cargoTankType: "",
        shipLength: "",
        shareShipType: [],
        shipCompany: "",
        shipNum: "",
        shipType: "",
        shipTypeNum: "",
        shipName: "",
        cargoTankCapacity: "",
        zhiYuanCompatibilityCompatible: "",
        zhiYuanFillStationPosition: [],
        haiGangFlangeFeatures: "",
        haiGangModels: "",
        haiGangSaddleModel: "",
        huaiHeCompatibilityCompatible: "",
        huaiHeFlangeFeatures: "",
        huaiHeModels: "",
        huaiHeSaddleModel: "",
        huaiHeFillingRate: "",
        qcdc_huai_he_flag: "",
        huaiHeMoorCompatible: "",
        huaiHeResearchTeam: "",
        huaiHeCompletionTime: "",
        huaiHeStsReportNumber: "",
        zhiYuanReportNumber: "",
        zhiYuanMoorCompatible: "",
        zhiYuanResearchTeam: "",
        zhiYuanCompletionTime: "",
        zhiYuanRiskCompatible: "",
        zhiYuanRiskResearchTeam: "",
        zhiYuanRiskCompletionTime: "",
        zhiYuanJpoReportNumber: "",
        huaiHeRiskCompatible: "",
        huaiHeRiskResearchTeam: "",
        huaiHeRiskCompletionTime: "",
        huaiHeJpoReportNumber: "",
        fillCountNum: "",
        haiGangConnectorModel: "",
        huaiHeSaddleFlag: "",
        haiGangMoorImg: {
          C2: "",
          C3: "",
          C4: "",
          C5: "",
          C6: "",
          C7: "",
          E2: "",
          E3: "",
          E4: "",
          E5: "",
          E6: "",
          E7: "",
          F2: "",
          F5: "",
        },
        huaiHeMoorImg: {
          C2: "",
          C3: "",
          C4: "",
          C5: "",
          C6: "",
          C7: "",
          E2: "",
          E3: "",
          E4: "",
          E5: "",
          E6: "",
          E7: "",
          F2: "",
          F5: "",
        },
        id: "",
        ssl_connection_form: "",
        shose_connection_form: "",
        maxFillingRate: "",
        fillingStation: "",
        liquidPhaseTubeSize: "",
        meteorologicalTubeSize: "",
        nitrogenPipeType: "",
        haiGangXiBoOperationRecord: "",
        huaiHeXiBoOperationRecord: "",
        haiGangJianRongOperationRecord: "",
        huaiHeJianRongOperationRecord: "",
        haiGangLoadShip: "",
        huaiHeLoadShip: "",
        haiGangLoadShipModels: "",
        haiGangLoadShipSaddleModels: "",
        haiGangFilledShip: "",
        zhiYuanFilledShipModels: [],
        haiGangFilledShipSaddleModels: "",
        haiGangExcelText: "",
        huaiHeExcelText: "",
        haiGangTakeover: "",
        huaiHeLoadShipModels: "",
        huaiHeLoadShipSaddleModels: "",
        huaiHeFilledShip: "",
        huaiHeWorkArea: "",
        haiGangWorkArea: "",
        huaiHeFilledShipSaddleModels: "",
        huaiHeTakeover: "",
        huaiHeJianRongOperationRecord: "",
      };
    },

    clickLastPage() {
      if (this.page > 1) {
        this.page--;
        if (this.page == 1) {
          this.color = "#EBEBEB";
        } else {
          this.color = "#268FDE";
        }
        if (this.page < this.totalPages) {
          this.color1 = "#268FDE";
        }
        this.getRenderList();
      } else {
        this.color = "#EBEBEB";
      }
    },
    clickNextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.color = "#268FDE";
        if (this.page == this.totalPages) {
          this.color1 = "#EBEBEB";
        } else {
          this.color1 = "#268FDE";
        }
      }
      this.getRenderList();
    },
    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
    skipPage(a, b) {
      this.clickEdit(b);
      this.isActive = a;
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
    $route(to, from) {
      // 在这里根据参数的变化执行刷新页面的逻辑
      if (to.name == from.name) {
        this.close();
      }
    },
  },

  created() {
    this.sendMessage();
    this.findALl();
    this.token = JSON.parse(sessionStorage.getItem("token"));

    this.getShipType();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    this.getRenderList();

    // this.sendMessage();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.spliceButtonTextActive {
  border: 1px solid #22b14c;
  color: #22b14c;
}
.loadHomeWorkIneer::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}

/* 自定义滚动条滑块的颜色 */
.loadHomeWorkIneer::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

/* 自定义滚动条轨道的颜色 */
.loadHomeWorkIneer::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}
.manyInput::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}

/* 自定义滚动条滑块的颜色 */
.manyInput::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

.manyInput::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}
.manyInput {
  width: 1170px;
  height: 80vh;
  margin: auto;
  overflow: auto;

  .iuptInnerContain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    .inputInner {
      width: 375px;
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      color: #365488;
      .name {
        width: 160px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }

      .inputContainer {
        width: 200px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 210px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        color: #365488;
        text-align: left;
        border-radius: 4px;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
    }
    .jianrongList {
      width: 90%;
      line-height: 30px;
      // background: #fafafa;
      margin: auto;
      display: flex;
      align-items: center;

      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      color: #909399;
      border: 1px solid #ebeef5;
      border-bottom: none;

      .line1 {
        width: 20%;
        height: 30px;
        padding-left: 5px;
        border-right: 1px solid #ebeef5;
      }
      .line2 {
        width: 40%;
        height: 30px;
        padding-left: 5px;
        border-right: 1px solid #ebeef5;
        input {
          width: 100%;
          border: none;
          outline: none;
          font-size: 18px;
          // background: #fafafa;
          height: 28px;
          font-weight: 600;
          font-size: 14px;
          color: #909399;
        }
      }
      .line3 {
        width: 40%;
        padding-left: 5px;
        input {
          width: 100%;
          border: none;
          outline: none;
          height: 28px;
          font-size: 18px;
          // background: #fafafa;

          font-weight: 600;
          font-size: 14px;
          color: #909399;
        }
      }
    }
    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
  .line {
    width: 100%;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 2px solid #c0c0c0;
  }
  .centerInput {
    width: 100%;
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #c0c0c0;
    .bigName {
      width: 100%;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      color: black;
    }
    .centerNamePut {
      width: 555px;

      .inputInner {
        width: 375px;
        height: 35px;
        // background: blue;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        // align-items: center;
        // justify-content: space-between;
        color: #365488;
        .name {
          width: 150px;
          height: 100%;
          line-height: 4vh;
          text-align: right;
          font-size: 15px;
        }

        .inputContainer {
          width: 210px;
          margin-left: 5px;
        }
        .el-input__inner {
          background: white !important;
        }
        input {
          width: 220px;
          height: 34px;
          margin-left: 5px;
          border-radius: 5px;
          text-indent: 1em;
          outline: none;
          border: none;
          background: white !important;
          color: #365488;
          border: 1px solid #dcdfe6;
        }
        input::-webkit-input-placeholder {
          color: #a8abb2;
        }
        input[type="date"] {
          color: #365488;
          text-align: left;
          border-radius: 4px;
          box-sizing: border-box;
        }
      }
      .el-date-picker .el-picker-panel {
        background-color: white !important;
      }
    }
    .centerLine {
      height: 100%;
      width: 2px;
      height: 350px;
      border-left: 2px solid #c0c0c0;
    }
  }
  .centerInput1 {
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    // align-items: center;
    // border-bottom: 2px solid #c0c0c0;
    padding-bottom: 10px;

    .centerNamePut {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .inputInner {
        width: 400px;
        height: 35px;
        // background: blue;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        color: #365488;
        .name {
          width: 125px;
          height: 100%;
          line-height: 4vh;
          text-align: right;
          font-size: 15px;
        }
        .name1 {
          width: 110px;
          height: 100%;
          background: #0470c1;
          text-align: center;
          line-height: 4vh;
          border-radius: 5px;
          font-size: 15px;
          color: white;
        }
        .name2 {
          width: 130px;
          margin-right: 10px;
          height: 100%;
          background: #0470c1;
          text-align: center;
          line-height: 4vh;
          border-radius: 5px;
          font-size: 15px;
          color: white;
        }

        .inputContainer {
          width: 220px;
          margin-left: 5px;
        }
        .el-input__inner {
          background: white !important;
        }
        input {
          width: 240px;
          height: 34px;
          margin-left: 5px;
          border-radius: 5px;
          text-indent: 1em;
          outline: none;
          border: none;
          background: white !important;
          color: #365488;
          border: 1px solid #dcdfe6;
        }
      }
      .el-date-picker .el-picker-panel {
        background-color: white !important; /* 你想要的背景颜色 */
      }
    }
    .centerLine {
      height: 100%;
      width: 2px;
      height: 520px;
      border-left: 2px solid grey;
    }
    .centerLine1 {
      height: 100%;
      width: 2px;
      height: 670px;
      border-left: 2px solid grey;
    }
  }
}
.bigName {
  width: 100%;
  line-height: 30px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: black;
}
.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}
.dialogText1 {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 20px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;
    overflow-y: hidden;
    overflow: auto;

    .loadAndSearch {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}
.centerPicContain {
  width: 90%;
  margin: auto;
  height: 150px;
  // background: blue;
  margin-top: 5px;
}
div {
  box-sizing: border-box;
}
.aliLIne {
  width: 100%;
  display: flex;
  height: 140px;
  border: 1px solid #c0c0c0;
  color: #3e3d3d;
  text-align: center;
  overflow: hidden;
  font-size: 14px;
  .tableLeft1 {
    width: 17%;
    height: 140px;
    .left1Child1 {
      width: 100%;
      height: 20px;
      border-right: 1px solid #c0c0c0;
    }

    .left1Child2,
    .left1Child3 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      border-right: 1px solid #c0c0c0;
      // display: flex;
      align-content: center;
      justify-content: center;
    }
  }
  .tableLeft2 {
    width: 33%;
    .left1Child1 {
      width: 100%;
      height: 20px;
      border-right: 1px solid #c0c0c0;
    }
    .left1Child2 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      .splice {
        width: 100%;
        display: flex;
        div {
          height: 20px;
          border-right: 1px solid #c0c0c0;
          border-bottom: 1px solid #c0c0c0;
        }
        .spliceRigth {
          width: 40%;
          input {
            outline: none;
            border: none;
            width: 100% !important;
            text-align: center;
          }
        }
        .spliceLeft {
          width: 60%;
        }
      }
    }
  }
  .tableLeft3 {
    width: 33%;
  }
  .tableLeft4 {
    width: 17%;
    .left1Child1 {
      height: 20px;
    }
    .left1Child2 {
      width: 100%;
      height: 60px;
      border-top: 1px solid #c0c0c0;
      input {
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        text-align: center;
      }
    }
  }
}
.dialog3 {
  width: 410px;
  height: 270px;
  border-radius: 10px;
  background: #f0f1f4;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
  z-index: 100;
}

.dialog3 .upContain {
  width: 152px;
  height: 28px;
  margin: auto;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog3 .upContain .addfile {
  width: 100%;
  height: 28px;
  font-size: 15px;
}

.dialog3 .fileName {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog3 .fileName div {
  width: 100%;

  text-align: center;
  color: black;
}

.dialog3 .upContain .addfile::file-selector-button {
  width: 100%;
  height: 28px;
  background-color: #268fde;
  border: 1px solid #268fde;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
}

.dialog3 .upFileSrue {
  width: 152px;
  height: 20px;
  font-size: 15px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog3 .upFileSrue .buttonUpdata {
  outline: none;
  border: none;
  width: 65px;
  border-radius: 0.5vh;
  height: 20px;
  background: #ed1c24;
  color: white;
}

.dialog3 .upFileSrue .buttonUpdata1 {
  background: #22b14c;
}
.shipTypeListName {
  width: 90%;
  height: 40px;
  background: #fafafa;
  margin: auto;
  border: 1px solid #ebeef5;
  border-bottom: none;
  margin-top: 10px;
  input {
    outline: none;
    border: none;
    background: #fafafa;
    width: 100%;
    height: 100%;
    text-align: center;
  }
}
</style>
